<template>
    <div id="main" style="width: 500px;height: 500px"></div>
    <div id="main1" style="width: 500px;height: 500px;position: absolute;left: 40%;top: 0%;"></div>
    <div style="position:absolute;left: 80%;top: 0%;">
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button><br>
        <el-button type="success" style="margin-top: 10px;">成功按钮</el-button>
        <el-button type="primary" style="margin-top: 10px;">主要按钮</el-button><br>
        <el-button type="success" style="margin-top: 10px;">成功按钮</el-button>
        <el-button type="primary" style="margin-top: 10px;">主要按钮</el-button><br>
    </div>



    <div id="null">{{id}}</div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
//定义一个响应式对象
const state = reactive({
    // 指定图表的配置项和数据
    option: {
        title: {
            text: "月销量",
        },
        // 提示框
        tooltip: {},
        // 图例
        legend: {
            data: ["销量"],
        },
        // 表示x轴坐标
        xAxis: {
            data: ["oppo", "vivo", "iphone", "小米", "三星", "魅族"],
        },
        // 表示y轴坐标
        yAxis: {},
        //
        series: [
            {
                name: "销量",
                type: "bar",
                data: [3500, 2200, 4500, 6500, 200, 3000],
            },
        ],
    },
    // 指定图表的配置项和数据
    option1: {
        title: {
            text: "月销量",
        },
        // 提示框
        tooltip: {},
        // 图例
        legend: {
            data: ["销量"],
        },
        // 表示x轴坐标
        xAxis: {
            data: ["oppo", "vivo", "iphone", "小米", "三星", "魅族"],
        },
        // 表示y轴坐标
        yAxis: {},
        //
        series: [
            {
                name: "销量",
                type: "bar",
                data: [3500, 2200, 4500, 6500, 200, 3000],
            },
        ],
    }

})

onMounted(() => {
    const myChart = echarts.init(document.querySelector('#main'))
    myChart.setOption(state.option)
    const myChart1 = echarts.init(document.querySelector('#main1'))
    myChart1.setOption(state.option1)
})

</script>
